<template>
    <router-view></router-view>
    <!-- 搜索栏 -->
    <filter-products @submitForm="onHandle"></filter-products >


    <el-table :data="productsList" style="width: 100%" v-loading="loading" >
        <el-table-column prop="id" label="序号" width="100" />
        <el-table-column prop="brand" label="品牌" width="150"  />
        <el-table-column prop="price" label="价格" width="100"   />
        <el-table-column prop="stock" label="库存" width="100"   />
        <el-table-column prop="production_date" label="生产日期" width="150" />
        <el-table-column label="分类" width="200">

        <!-- 作用域插槽 -->
        <template #default="{row}">
          {{getCategoryName(row.categoryId).map(item=> item.name).join("|")}}
        </template>
          

        </el-table-column>>




        <el-table-column label="操作" >

            <template #default="{row}" >
                <el-button size="small" type="success" @click="showProductDetail(row)"  >详情</el-button>
               
            </template>

        </el-table-column>
    </el-table>
    <el-pagination background layout="prev, pager, next" 
    :total="total" 
    v-model:current-page="page"
    v-model:page-size="pageNum"
    />
</template>


<script setup>
import  FilterProducts  from "@/views/products/FilterProducts.vue";
import {useProducts} from "@/hooks/products"
import {useCategory} from '@/hooks/category'

const {productsList,loading,showProductDetail,page,pageNum,total,onHandle} = useProducts();
const {getCategoryName} = useCategory();

</script>